<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>this指向</h2>
    <button class="btn">点我</button>
</body>
<script>
    //1.在全局this  === window
    //  console.log(this)

    //2.在函数中this === window
    // function fn() {
    //     console.log('this:', this)
    // }

    // fn()

    //3.对象中的this  === 指向当前调用对象
    // const obj = {
    //     name: 'alice',
    //     age: 20,
    //     getUserInfo: function() {
    //         console.log('this11:', this)
    //             // const _this = this;
    //         const fn1 = function() {
    //             console.log('this12:', this) //???
    //         }

    //         fn1()

    //     }
    // }

    // obj.getUserInfo()

    //4. 在构造函数中的this  === 实例化对象本身
    // function fn() {

    //     this.name = 'jack'
    //     this.age = 20
    //     console.log('this:', this) //??
    // }

    // const f1 = new fn()
    // console.log('f1:', f1)
    // const f2 = new fn()

    //5.在定时器中的this  永远指向window
    // const obj = {
    //     name: 'alice',
    //     age: 20,
    //     getUserInfo: function() {
    //         setTimeout(function() {
    //             console.log('定时器中的this:', this) //???
    //         }, 1000)

    //     }
    // }

    // obj.getUserInfo()

    //6. dom中的this  ===指向当前触发事件的dom
    // const btn = document.querySelector('.btn')
    // console.log(btn)
    // btn.onclick = function() {
    //     console.log(this) //??
    // }

    //总结：通常谁调用this,this指向谁
    //有特殊情况：
    let name = 'jack'
    const obj = {
        name: 'alice',
        age: 20,
        getUserInfo: function() {
            console.log('this:', this.name)

        }
    }

    let getUserInfo;
    (getUserInfo = obj.getUserInfo)()
</script>

</html>